<template>
	<view class="page">
		<view class="head">
			<view class="p-c">
				同学你好，你的测试结果为：
			</view>
			<view class="h1-c">
				逻辑
			</view>
			<view class="p-c">
				数理能力
			</view>
			<view class="p">
				数理能力：社会型的人有较强的社会责任感和人道主义倾向，社会适应能力较强。他们善于与人交往，
			</view>
		</view>
		<!-- 多元智能的理论结构 -->
		<view class="theoretical-construct">
			<view class="title">
				多元智能的理论结构
			</view>
			<view class="cont">
				现行智力测验的内容，因偏重对知识的测量，结果是窄化了人类的智力，甚至曲解了人类的智力。按加德纳的解释，智力是在某种文人环境的价值标准之下，个体用以解决问题与生产创造所需的能力。而支撑多元智能理论的是个体身上相对独立存在着的、与特定的认知领域和知识领域相联系的八种智能：语言智能、节奏智能、数理智能、空间智能、动觉智能、自省智能、交流智能和自然观察智能。
			</view>
		</view>
		<!-- 测评结果 -->
		<view class="radar">
			<view class="title">
				测评结果
			</view>
			<view class="cont">
				<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas>
			</view>
		</view>
		<!-- 艺术能力与主科能力对比 -->
		<view class="column">
			<view class="title">
				艺术能力与主科能力对比
			</view>
			<view class="cont">
				<canvas canvas-id="canvasColumnA" id="canvasColumnA" class="charts"></canvas>
			</view>
		</view>
		<!-- 选科能力对比 -->
		<view class="column">
			<view class="title">
				选科能力对比
			</view>
			<view class="cont">
				<canvas canvas-id="canvasColumnB" id="canvasColumnB" class="charts"></canvas>
			</view>
		</view>
		
		<!-- 建议组合 -->
		<view class="suggest-combination">
			<view class="title">
				建议组合
			</view>
			<view class="table-wrap">
				<view class="tr" v-for="(item,index) in 4" :key="index">
					<view class="td">
						物理
					</view>
					<view class="td">
						生物
					</view>
					<view class="td">
						化学
					</view>
				</view>
			</view>
			<view class="tip">
				具体问题具体分析，建议找专业学业规划师进行报告解读！！！
			</view>
		</view>
		<!-- 智能训练方法 -->
		<view class="intelligent-training-method">
			<view class="title">
				智能训练方法
			</view>
			<view class="cont" style="height: 500rpx;">
				爬虫或富文本编辑的内容展示
			</view>
		</view>

	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaRadar = null;
	var canvaColumn = null;
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				//雷达图数据
				resultData: {
					"categories": ["语言智能", "逻辑数理智能", "规律观察智能", "自知自省智能", "交往交流智能", "音乐节奏智能", "身体动觉智能", "视觉空间智能"],
					"series": [{
						"name": "测评结果",
						"data": [60, 60, 80, 53, 67, 54, 40, 50]
					}]
				},
				// 柱状图数据
				columnDataA: {
					"categories": ["语文", "数学", "外语", "美术", "音乐", "表演", "体育"],
					"series": [{
						"name": "艺术能力与主科能力对比",
						"data": [
							{
								"value": 90,
								"color": "#FE8D3C"
							},
							{
								"value": 58,
								"color": "#FE8D3C"
							},
							{
								"value": 88,
								"color": "#FE8D3C"
							},
							{
								"value": 58,
								"color": "#FE8D3C"
							},
							{
								"value": 90,
								"color": "#FE8D3C"
							},
							{
								"value": 58,
								"color": "#FE8D3C"
							},
							{
								"value": 90,
								"color": "#FE8D3C"
							}
						]
					}]
				},
				columnDataB: {
					"categories": ["物理", "化学", "生物", "历史", "政治", "地理", "技术"],
					"series": [{
						"name": "选科能力对比",
						"data": [
							{
								"value": 90,
								"color": "#FE8D3C"
							},
							{
								"value": 58,
								"color": "#FE8D3C"
							},
							{
								"value": 88,
								"color": "#FE8D3C"
							},
							{
								"value": 58,
								"color": "#FE8D3C"
							},
							{
								"value": 90,
								"color": "#FE8D3C"
							},
							{
								"value": 58,
								"color": "#FE8D3C"
							},
							{
								"value": 90,
								"color": "#FE8D3C"
							}
						]
					}]
				}
			}
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.showRadar("canvasRadar", _self.resultData);
			this.showColumn("canvasColumnA", _self.columnDataA);
			this.showColumn("canvasColumnB", _self.columnDataB);
		},
		methods: {
			// 雷达图
			showRadar(canvasId, chartData) {
				canvaRadar = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'radar',
					fontSize: 11,
					legend: {
						show: true
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					dataLabel: true,
					categories: chartData.categories,
					series: chartData.series,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						radar: {
							max: 100, //雷达数值的最大值
							labelColor: '#666666',
							gridColor: '#F1F1F1'
						}
					}
				});
			},
			// 柱状图
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: true
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: 15
							// width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						}
					}
				});
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	@import 'xuekecepingjieguo.scss';
</style>
